<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天地图示例</title>
  <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=dadf50a84c69b2e44442d43d2ae0d707"></script>
  <style>
    #map {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // 初始化天地图
    const map = new T.Map('map');
    map.centerAndZoom(new T.LngLat(113.54, 22.26), 12); // 设置中心点和缩放级别

    // 创建土地面图层（多边形）
    const polygon = new T.Polygon([
      new T.LngLat(113.53, 22.25),
      new T.LngLat(113.55, 22.25),
      new T.LngLat(113.55, 22.27),
      new T.LngLat(113.53, 22.27)
    ], {
      color: 'blue', // 边框颜色
      fillColor: 'rgba(0, 0, 255, 0.3)', // 填充颜色
      weight: 2 // 边框宽度
    });

    // 将多边形添加到地图
    map.addOverLay(polygon);

    // 监听多边形点击事件
    polygon.addEventListener('click', () => {
      console.log('你点击了地块！');
      const featureInfo = {
        type: 'featureClick',
        data: {
          id: 'zhuhai001',
          name: '珠海香洲区用地',
          area: '35亩'
        }
      };

      // 发送消息给 UniApp
      if (typeof uni !== 'undefined') {
        uni.postMessage({ data: featureInfo });
      } else {
        console.warn('当前环境不支持 uni.postMessage');
      }
    });
  </script>
</body>
</html>